<template>
  <!-- <el-row> -->
    <!-- <el-container style="height: 100%;"> -->
      
      <div style="width:100%;height: 100%;background:#F7F9FF; position:relative;">
        
        <div class="wrapper"  style="width:100%;background:#F7F9FF;padding:0;">
          <!-- <div style="width:100%;height: auto; padding:0;margin:0;"> -->
          
          <!-- </div> -->
          <div class="pageAll" :class="{'fullPageAll': isFullScreen}" style="width:100%;box-sizing: border-box;">
            <!-- <transition :name="transitionName" mode="out-in"> -->
              <router-view @isFullScreen="fullScreen"></router-view>
            <!-- </transition> -->
          </div>
          <div class="bottomNav" v-if="!isFullScreen">
            <bottom-nav></bottom-nav>
          </div>
        </div>

        <audio id='clickVoice' ref="clickVoice"  src="http://www.mingxiaoclub.cn/zebraOnline/voice/click.mp3" ></audio>
      </div>
    <!-- </el-container> -->
  <!-- </el-row> -->
</template>



<style scoped>
/*  transition scss */
.fade-page-enter-active,
.fade-page-leave-active {
  transition: all 0.5s;
}
.fade-page-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-page-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}


.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.5s;
}

.slide-right-enter {
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-to {
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-to {
  transform: translate3d(-100%, 0, 0);
}

/*  transition scss */

.wrapper {
  /* min-height: calc(100% - 1.2rem); */
  /* padding-top: 1.2rem !important; */
}

.top_bar {
  position: fixed ;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.2rem;
  background: #303133;
  z-index: 99;
}


.pageAll {
  height: calc(100% - 1.306667rem);
  /* overflow: scroll; */
}

.fullPageAll {
  height: 100% !important;
}

.hasBottomNav{
  padding-bottom: 1.306667rem !important;
}

.bottomNav {
  position: fixed;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1.306667rem;
  background: #fff;
  box-shadow:0px -2px 2px 0px rgba(216,216,216,0.2);
}









</style>

<script>
const wx = require('weixin-js-sdk');
import bottomNav from '@/components/common/bottomNav'

import {
  mapState,
  createNamespacedHelpers,
} from "vuex";
let {
  mapGetters,
  mapActions
} = createNamespacedHelpers("adminBasic");

export default {
  data() {
    return {
      transitionName: 'fade-page',
      jwtAuth: {},
      tabBarList: [],
      isFullScreen: false,
    }
  },
 


  computed: {
    
  },
  components: {
    bottomNav,
  },
  created() {
    // 微信相关
    this.initWxConfig();
    // console.log('created了')

  },

  activated() {
    // console.log('激活了')
  },
  mounted() {
    let audio = document.getElementById('clickVoice');
    
    document.ontouchstart = function(e) {
      // console.log(e.target)
      let arr = [
        'van-cell__title', 
        'van-dropdown-menu__title', 
        'van-ellipsis',
        'van-cell__right-icon',
        'van-dropdown-item__option',
        'van-cell van-cell--clickable van-dropdown-item__option',
      ]

      for (let i = 0; i < arr.length; i++) {
        if(arr.includes(e.target.getAttribute('class'))) {
          e.target.setAttribute('clickVoice', true);
        }
      }
  
      if(e.target.getAttribute("clickVoice")) {
        audio.play();
      }
    }


    var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      //在微信中打开
      // alert('在微信中打开')
    }else{
      let url = window.location.href;
      url = encodeURIComponent(url)
      // window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6461e3736f9366e9&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`)
      // alert('在其他浏览器中打开')
    }
  },
  methods: {
    ...mapActions([
      'formGet'
    ]),

    fullScreen(data) {
      console.log(data);
      console.log('===================================')
      this.isFullScreen = data;
    },

    initWxConfig() {
      let _this = this;
      let url = window.location.href.split('#')[0];
      url = encodeURIComponent(url)
      console.log(url);
      this.$axios.get(`http://39.105.125.149:8060/banma/getTimestampNonceStrSignature?url=${url}`)
      .then(res => {
        res = res.data.data
        // console.log(res)
        wx.config({
          debug: false, // 开启调试模式,
          appId: 'wx6461e3736f9366e9', // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature,// 必填，签名，见附录1
          // jsApiList: ['openlocation', 'getLocation',] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage',],
        });

        wx.ready(function () {
          wx.onMenuShareAppMessage({ 
            title: '斑马公学线上课程学习平台', // 分享标题
            desc: '朋友推荐的美国教育博士、北大硕士研发的在线“幼小衔接思维课”，限时免费', // 分享描述
            link: 'http://www.mingxiaoclub.cn/zebraOnline/#/login', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.mingxiaoclub.cn/zebraOnline/img/icon_share.png', // 分享图标
            success: function () {
              console.log('分享给朋友---success')
              // 设置成功
            },
            error: function(err) {
              console.log(err)
            }
          })
        });

        wx.ready(function () {     
          wx.onMenuShareTimeline({ 
            title: '斑马公学线上课程学习平台', // 分享标题
            link: 'http://www.mingxiaoclub.cn/zebraOnline/#/login', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.mingxiaoclub.cn/zebraOnline/img/icon_share.png', // 分享图标
            success: function () {
              console.log('分享到朋友圈---success')
              // 设置成功
            },
            error: function(err) {
              console.log(err)
            }
          })
        });

        wx.error(function(err){
          console.log(err)
        })


      }).catch(err => {
        
      })
    },
  }
}

</script>
